<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataTable Component Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    <style>
        body {
            padding: 2rem;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .demo-section {
            margin-bottom: 3rem;
        }
        .demo-section h2 {
            margin-bottom: 1rem;
            color: #374151;
        }
        .code-block {
            background: #f3f4f6;
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
            overflow-x: auto;
        }
        .code-block code {
            font-size: 0.875rem;
            color: #1f2937;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>DataTable Component Demonstration</h1>
        <p>This page demonstrates the DataTable component with various configurations.</p>

        <hr>

        <!-- Demo 1: Basic Table with API -->
        <div class="demo-section">
            <h2>1. Basic Table with API Endpoint</h2>
            <p>Fetches data from <code>/api/v1/projects</code> endpoint with server-side pagination.</p>

            <div class="code-block">
                <code>&lt;div data-svelte-component="DataTable"
     data-endpoint="/api/v1/projects"
     data-page-size="10"
     data-searchable="true"&gt;
&lt;/div&gt;</code>
            </div>

            <div
                data-svelte-component="DataTable"
                data-endpoint="/api/v1/projects"
                data-columns='[
                    {"label":"Name","field":"name","sortable":true},
                    {"label":"Description","field":"description"},
                    {"label":"Status","field":"status","sortable":true},
                    {"label":"Created","field":"created_at","sortable":true}
                ]'
                data-page-size="10"
                data-searchable="true"
                data-search-placeholder="Search projects..."
            ></div>
        </div>

        <hr>

        <!-- Demo 2: Table with Static Data -->
        <div class="demo-section">
            <h2>2. Table with Static Data</h2>
            <p>Uses static JSON data instead of API endpoint.</p>

            <div class="code-block">
                <code>&lt;div data-svelte-component="DataTable"
     data-data='{"items":[...],"total":5}'&gt;
&lt;/div&gt;</code>
            </div>

            <div
                data-svelte-component="DataTable"
                data-columns='[
                    {"label":"ID","field":"id","sortable":true},
                    {"label":"Name","field":"name","sortable":true},
                    {"label":"Email","field":"email"},
                    {"label":"Role","field":"role","sortable":true}
                ]'
                data-data='{
                    "items": [
                        {"id":1,"name":"Alice","email":"alice@example.com","role":"Admin"},
                        {"id":2,"name":"Bob","email":"bob@example.com","role":"User"},
                        {"id":3,"name":"Charlie","email":"charlie@example.com","role":"User"},
                        {"id":4,"name":"David","email":"david@example.com","role":"Manager"},
                        {"id":5,"name":"Eve","email":"eve@example.com","role":"User"}
                    ],
                    "total": 5
                }'
                data-searchable="false"
            ></div>
        </div>

        <hr>

        <!-- Demo 3: Table with Row Selection -->
        <div class="demo-section">
            <h2>3. Table with Row Selection and Batch Actions</h2>
            <p>Enables row selection with checkboxes and batch operations.</p>

            <div class="code-block">
                <code>&lt;div data-svelte-component="DataTable"
     data-selectable="true"
     data-batch-actions='[...]'&gt;
&lt;/div&gt;</code>
            </div>

            <div
                data-svelte-component="DataTable"
                data-columns='[
                    {"label":"ID","field":"id"},
                    {"label":"Product","field":"product","sortable":true},
                    {"label":"Price","field":"price","sortable":true},
                    {"label":"Stock","field":"stock","sortable":true}
                ]'
                data-data='{
                    "items": [
                        {"id":101,"product":"Laptop","price":"$999","stock":15},
                        {"id":102,"product":"Mouse","price":"$29","stock":50},
                        {"id":103,"product":"Keyboard","price":"$79","stock":30},
                        {"id":104,"product":"Monitor","price":"$399","stock":20},
                        {"id":105,"product":"Webcam","price":"$59","stock":25},
                        {"id":106,"product":"Headphones","price":"$149","stock":40}
                    ],
                    "total": 6
                }'
                data-selectable="true"
                data-searchable="true"
            ></div>
        </div>

        <hr>

        <!-- Demo 4: Compact Table -->
        <div class="demo-section">
            <h2>4. Compact Table (No Search)</h2>
            <p>Minimal table without search functionality.</p>

            <div
                data-svelte-component="DataTable"
                data-columns='[
                    {"label":"Date","field":"date"},
                    {"label":"Event","field":"event"},
                    {"label":"Status","field":"status"}
                ]'
                data-data='{
                    "items": [
                        {"date":"2025-10-27","event":"System started","status":"✅ Success"},
                        {"date":"2025-10-27","event":"Database backup","status":"✅ Success"},
                        {"date":"2025-10-27","event":"API health check","status":"✅ Success"}
                    ],
                    "total": 3
                }'
                data-searchable="false"
                data-page-size="5"
            ></div>
        </div>

        <hr>

        <!-- Demo 5: Empty State -->
        <div class="demo-section">
            <h2>5. Empty State</h2>
            <p>Shows empty state when no data is available.</p>

            <div
                data-svelte-component="DataTable"
                data-columns='[
                    {"label":"ID","field":"id"},
                    {"label":"Name","field":"name"}
                ]'
                data-data='{"items":[],"total":0}'
                data-empty-message="No items found. Try adjusting your search criteria."
            ></div>
        </div>

    </div>

    <!-- Global Toast Container -->
    <div data-svelte-component="ToastContainer"></div>

    <!-- Load Svelte Components -->
    <script type="module" src="/static/js/main.js"></script>

    <script>
        // Simulate batch action handler
        window.handleBatchDelete = function(selectedIds) {
            console.log('Batch delete:', selectedIds);
            alert(`Deleting ${selectedIds.length} items: ${selectedIds.join(', ')}`);
        };
    </script>
</body>
</html>
